<template>
  <zeda-dialog
    v-model="visible"
    title="请选择需要汇总的年月"
    width="500px"
    :before-close="handleClose"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form>
    <form-button
      slot="footer"
      :loading="loading"
      :submitText="'下一步'"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import FormButton from "@/components/FormButton";
import {
  getARdeptsummary,
  getARdeptlist,
} from "@/api/standingbook/newstandingbook.js";
export default {
  dicts: [],
  components: {
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      apsForm: {
        formRef: "form",
        formData: {},
        formConfig: {
          formAttr: {
            // inline: true,
            "label-position": "right",
            size: "small",
            bsColumn: {
              col: 1,
              middle: true,
            },
            rules: {
              deptId: [
                {
                  required: true,
                  message: "请选择主管区域",
                  trigger: "change",
                },
              ],
              year: [
                {
                  required: true,
                  message: "请选择年份",
                  trigger: "change",
                },
              ],
              month: [
                {
                  required: true,
                  message: "请选择时间段",
                  trigger: "change",
                },
              ],
            },
          },
          properties: {
            //这里是渲染查询表单的表头和类型的数据
            deptId: {
              label: "主管区域",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                arr = [...that.deptArr];
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().deptId;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "请选择主管区域",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("deptId", value);
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: value,
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            year: {
              label: "年份",
              typeName: "el-date-picker",
              type: "year",
              size: "small",
              placeholder: "选择年份",
              "value-format": "yyyy",
            },
            fillType: {
              label: "填报类型",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                arr = [
                  {
                    label: "月报",
                    value: 1,
                  },
                ];
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().fillType;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "请选择填报类型",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("fillType", value);
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: value,
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            month: {
              label: "时间段",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                arr = [
                  {
                    label: "一月",
                    value: "01",
                  },
                  {
                    label: "二月",
                    value: "02",
                  },
                  {
                    label: "三月",
                    value: "03",
                  },
                  {
                    label: "四月",
                    value: "04",
                  },
                  {
                    label: "五月",
                    value: "05",
                  },
                  {
                    label: "六月",
                    value: "06",
                  },
                  {
                    label: "七月",
                    value: "07",
                  },
                  {
                    label: "八月",
                    value: "08",
                  },
                  {
                    label: "九月",
                    value: "09",
                  },
                  {
                    label: "十月",
                    value: "10",
                  },
                  {
                    label: "十一月",
                    value: "11",
                  },
                  {
                    label: "十二月",
                    value: "12",
                  },
                ];
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().month;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "请选择时间段",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("month", value);
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: value,
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
          },
        },
      },
      deptArr: [],
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.defaultSet();
        }
      },
      deep: true,
      immediate: false,
    },
  },
  methods: {
    defaultSet() {
      this.requestDeptarr();
      setTimeout(() => {
        this.$refs?.form?.setFieldValue("fillType", 1);
      }, 200);
    },
    requestDeptarr() {
      this.deptArr = [];
      getARdeptlist()
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          if (arr.length > 0) {
            arr.map((item) => {
              let obj = {
                label: item?.deptName ?? "",
                value: item?.deptId,
              };
              this.deptArr.push(obj);
            });
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    submit() {
      const data = {
        ...this.$refs.form.getFieldsValue(),
      };
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.requestgetARdeptsummary(data);
        } else {
          return false;
        }
      });
    },
    requestgetARdeptsummary(data) {
      let params = {};
      let year = data.year + "年";
      let month = data.month + "月";
      params.deptId = data.deptId;
      params.year = year;
      params.month = month;
      getARdeptsummary(params)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("汇总成功!");
          this.handleClose(true);
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
